<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
      <div class="search">
        <div class="searchcopy">
          <el-form-item label="工单编号:">
            <el-input v-model="queryParams.orderNumber" placeholder="请输入工单编号" clearable size="small"
                      style="width: 240px"
                      @keyup.enter.native="handleQuery"
                      @keyup.native="keyUp"
                      show-word-limit/>
          </el-form-item>
          <el-form-item label="产品图号:">
            <el-input v-model="queryParams.productCode" placeholder="请输入产品图号" clearable size="small"
                      style="width: 240px"
                      @keyup.enter.native="handleQuery"
                      @keyup.native="keyUp"
                      show-word-limit/>
          </el-form-item>
          <el-form-item label="产线名称:">
            <el-select v-model="queryParams.prodLineName" placeholder="请输入产线名称" filterable clearable
                       style="width: 240px">
              <el-option v-for="item in lineName" :key="item.label" :label="item.label"
                         :value="item.label"/>
            </el-select>
          </el-form-item>
          <el-form-item label="配送时间:">
            <el-date-picker
              class="timesearch"
              v-model="queryParams.timezone"
              type="datetimerange"
              range-separator="至"
              start-placeholder="配送时间"
              end-placeholder="配送时间"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </div>
        <div class="search-btn-style">
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </div>
      </div>
    </el-form>
    <el-table v-loading="loading" :data="inprodplanList">
      <el-table-column label="工单编号" align="center" prop="orderNumber" :show-overflow-tooltip="true" fixed="left"
                       width="150"/>
      <el-table-column label="产品图号" align="center" prop="productCode" :show-overflow-tooltip="true" fixed="left"
                       width="220"/>
      <el-table-column label="产线名称" align="center" prop="prodLineName" :show-overflow-tooltip="true" fixed="left"
                       width="200"/>
      <el-table-column label="工单数量" align="center" prop="orderProductCount" sortable :show-overflow-tooltip="true"
                       width="100"/>
      <el-table-column label="起始站点" align="center" prop="beginStationName" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column label="终点站点" align="center" prop="endStationName" :show-overflow-tooltip="true"
                       :formatter="endnameformatter" width="200">
      </el-table-column>
      <el-table-column
        label="终点库位区域"
        align="center"
        prop="endStationTypeId"
        :show-overflow-tooltip="true"
        :formatter="endformatter"
        width="200"
      >
      </el-table-column>
      <el-table-column label="空箱是否流转" align="center" prop="emptyBoxHoming" :show-overflow-tooltip="true"
                       :formatter="emptyBoxHomingformatter" width="100"/>
      <el-table-column label="计划状态" align="center" prop="status" :show-overflow-tooltip="true"
                       :formatter="statusformatter"/>
      <el-table-column label="配送时间" align="center" prop="sendTime" sortable :show-overflow-tooltip="true"
                       width="200">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.sendTime) }}</span>
        </template>
      </el-table-column>
      <!--      <el-table-column label="创建人" align="center" prop="creator" :show-overflow-tooltip="true"/>-->
      <el-table-column label="创建时间" align="center" prop="createTime" sortable
                       :show-overflow-tooltip="true"
                       width="200">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <!--      <el-table-column label="更新人" align="center" prop="updater" :show-overflow-tooltip="true"/>-->
      <!--      <el-table-column label="更新时间" align="center" prop="updateTime" sortable :show-overflow-tooltip="true"-->
      <!--                       width="180">-->
      <!--        <template v-slot="scope">-->
      <!--          <span>{{ parseTime(scope.row.updateTime) }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
  </div>
</template>
<script>
import {getoutList, getlinename} from "@/api/history/semiProduct";
import {listData} from "@/api/system/dict/data";

export default {
  name: "Role",
  data() {
    return {
      lineName: null,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      stocklist: null,
      // 总条数
      total: 0,
      // 库位类型
      positionlist: null,
      // 列表
      inprodplanList: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        orderNumber: null,
        prodLineName: null,
        productCode: null,
      },
    };
  },
  async mounted() {
    await this.getPositionList();
    this.getList();
    this.getStatusList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      getoutList(this.queryParams).then(
        response => {
          this.inprodplanList = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        }
      );
      getlinename().then(res => {
        this.lineName = res.data.map(item => {
          return {'label': item}
        })
      })
    },
    // 数据字典
    getPositionList() {
      let data = {
        dictType: "position_type",
      };
      return listData(data).then((res) => {
        this.positionlist = res.data.list;
      })
    },
    getStatusList() {
      let data = {
        dictType: "task_status",
      };
      return listData(data).then((res) => {
        this.stocklist = res.data.list;
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.orderNumber = null;
      this.queryParams.productCode = null;
      this.queryParams.prodLineName = null;
      this.queryParams.timezone = null;
      this.handleQuery();
    },
    //处理列表数据
    emptyBoxHomingformatter(row) {
      if (row.emptyBoxHoming == true) {
        return "是"
      } else {
        return "否"
      }
    },
    statusformatter(row) {
      let data = this.stocklist.filter(item => {
        return item.value == row.status
      })
      return data[0]?.label
    },
    endformatter(row) {
      let data = this.positionlist?.filter(item => {
        return item.value == row.endStationTypeId
      })
      return data[0]?.label
    },
    endnameformatter(row) {
      if (row.endStationName == null) {
        return "暂时没有终点站点"
      } else {
        return row.endStationName
      }
    }
  }
};
</script>

<style scoped>
.searchcopy {
  background-color: #fff;
  padding: 0 20px;
  padding-top: 17px;
  border-radius: 4px;
  display: inline-block;
}

.issue-pagination {
  margin-top: 26px;
}

/deep/ .el-dialog {
  width: 790px !important;
}

.success {
  display: inline-block;
  width: 45px;
  height: 30px;
  line-height: 30px;
  background-color: #eafff1;
  color: #38b865;
  border: 1px solid #4dc075;
  border-radius: 4px;
}

.fail {
  display: inline-block;
  width: 45px;
  height: 30px;
  line-height: 30px;
  background-color: #fff1ea;
  color: #eb5e12;
  border: 1px solid #ef7f43;
  border-radius: 4px;
}

.middle {
  display: inline-block;
  width: 45px;
  height: 30px;
  line-height: 30px;
  background-color: #fff8ea;
  color: #faad14;
  border: 1px solid #faad14;
  border-radius: 4px;
}

.search > * {
  padding: 0;
  margin-right: 30px !important;
}

</style>
